<template>
  <div class="batch-import">
    <el-drawer
      v-model="visible"
      :title="props.title"
      :size="props.width"
      :before-close="hide"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :modal="true"
    >
      <template #title>
        <div class="flex flex-col">
          <div class="drawer-header">
            <div class="flex items-center dot" v-if="showDot">
              <div class="w-[5px] h-[5px] rounded-1/2 bg-[#3721FF]"></div>
              <span class="ml-2 drawer-title">{{ props.title }}</span>
            </div>
          </div>
          <div class="text-[12px] mt-[4px] text-[#999] desc">{{ props.titleDesc }}</div>
        </div>
      </template>
      <div class="drawer-content">
        <div class="w-full h-[1px] bg-[#efefef] mb-[30px] line"></div>
        <slot></slot>
        <div class="flex flex-col download bg-[#FAFAFA] p-6 rounded-lg">
          <h3>1.下载导入模板</h3>
          <span class="text-[#999999] text-[12px] pt-10px pb-20px">请根据提示信息完善表格内容</span>
          <el-button plain class="w-[120px]" style="height: 42px" @click="confirm">
            <Icon icon="ep:download" color="#3721FF" />
            <span class="text-[#3721FF]">下载模板</span>
          </el-button>
        </div>
        <div class="flex flex-col download bg-[#FAFAFA] p-6 rounded-lg mt-8">
          <h3>2.上传完善后的模板</h3>
          <span class="text-[#999999] text-[12px] pt-10px">
            更新信息的模板中，如有空的数据列，则相应字段信息会被清空，请谨慎填写；
          </span>
          <span class="text-[#3721FF] text-[12px] pt-10px pb-20px">
            模板中表头名称不可更改，表头行不能删除。
          </span>
          <div class="bg-white border-dashed rounded-lg border-1px border-[#D9D9D9]">
            <div class="flex flex-col items-center justify-center h-[200px]">
              <img
                class="w-[80px] h-auto"
                src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01ANJ0x81S9wOlOwBiH_!!1034622205.png"
                alt=""
              />
              <p class="text-[#101010] text-[14px] pt-10px">
                将文件拖拽至此区域，或 <span class="text-[#3721FF] cursor-pointer">点击添加</span>
              </p>
              <span class="text-[#999999] text-[12px]">支持 .xls,.xlsx 格式，限10M以内</span>
            </div>
          </div>
        </div>
        <div class="flex flex-col mt-8">
          <h4>导入规则</h4>
          <p class="pt-10px pb-10px">
            1.请先下载模版，在模版中按要求填写组织信息，然后上传该文件
          </p>
          <p>2.单个文件不能超过10M，单次导入数据不能超过5000条</p>
        </div>
      </div>
      <template #footer>
        <div class="el-dia-btn">
          <el-button @click="hide">取消</el-button>
          <el-button type="primary" color="#3721FF" @click="confirm">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'BatchImport' })
const visible = ref(false)
const props = defineProps({
  showDot: {
    type: Boolean,
    default: false
  },
  isBatchImport: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '批量导入'
  },
  titleDesc: {
    type: String,
    default: ''
  },
  // 宽度
  width: {
    type: String,
    default: '50%'
  }
})
const emit = defineEmits(['close', 'confirm'])
const confirm = () => {
  emit('confirm')
  hide()
}
const show = () => {
  visible.value = true
}
const hide = () => {
  visible.value = false
  emit('close')
}
watch(
  () => props.isBatchImport,
  (val) => {
    visible.value = val
  }
)

defineExpose({
  show,
  hide
})
</script>

<style scoped>
@import '@/styles/website.scss';
:deep(.el-drawer__header) {
  margin-bottom: 0px !important;
}
</style>
